<template>
    <section class="townIndex" v-loading = "pageLoad">
        <CheckContentTown :onlyTown="true" v-if="user.roleCode==='CITY_LEADER'" @currentTown="getCurrentTown"></CheckContentTown>
        <div style="padding:0px 30px">
                <div slot="header" style="font-size: 18px;font-weight: bold;text-align: left;height: 180px">
                    <div style="width: 400px;float: right">
                        <el-form ref="form" label-width="130px" :model="form" :rules="rules" class="release-form">
                            <el-form-item label="一二级指标建议:" prop="advice">
                                <el-input type="textarea" v-model="form.advice"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button class="btn_reset" type="warning" size="medium" @click="townAdvice('form')">
                                    <span style="vertical-align: text-bottom">提交意见</span>
                                </el-button>
                                <el-button class="btnReleave" type="warning" size="medium" @click="reset()">
                                    <span style="vertical-align: text-bottom">取 消</span>
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>

            <!-- <div class="quota-container" :style="containerHeight" v-if="indexList.length>0">
                <div class="quota-root">
                    <div class="root-name"></div>
                    <div class="root-logo"></div>
                </div>
                <div class="expand-icon"></div>
                <div class="root-row-line"></div>
                <div :style="firstLevelLine" class="root-col-line"></div>
                <div :style="firstLevelActiveLine" class="root-col-line-active"></div>
                <div class="first-level-out-container">
                    <div v-for="(item, index) in indexList" :class="`first-level-container ${index === firstQuotaActiveIndex ? 'first-level-container-active' : ''}`" >
                        <template>
                            <div :class="`row-line ${index === firstQuotaActiveIndex ? 'row-line-active' : ''}`"></div>
                            <div class="first-level-contain" @click="handleCurrentQuotaChange(item, index,'first')">
                                <div class="first-level-top">
                                    <div class="quota-name">{{item.quotaName}}</div>
                                </div>
                                <div class="first-level-mid"></div>
                                <div class="first-level-bottom">
                                    <div class="star"></div>
                                    <div class="quota-score">{{item.quotaScore}}分</div>
                                </div>
                            </div>
                            <div :class="index === firstQuotaActiveIndex && firstExpandable ? 'commissure-icon' : 'expand-icon'"
                                 @click.prevent.stop="handleCommissure(index,'first')" v-if="item.kpiQuotas&&item.kpiQuotas.length>0" ></div>
                            <div class="quota-detail" v-if="index === firstQuotaActiveIndex && firstExpandable && item.kpiQuotas &&item.kpiQuotas.length>0">
                                <div class="root-row-line"></div>
                                <div :style="secondLevelLine" class="root-col-line"></div>
                                <div :style="secondLevelActiveLine" class="root-col-line-active"></div>
                                <div class="first-level-out-container">
                                    <div v-for="(subItem,subIndex) in item.kpiQuotas" :class="`first-level-container ${index === firstQuotaActiveIndex ? 'first-level-container-active' : ''}`" >
                                        <div :class="`row-line ${subIndex === secondQuotaActiveIndex ? 'row-line-active' : ''}`"></div>
                                        <div class="first-level-contain" @click="handleCurrentQuotaChange(subItem, subIndex,'second')">
                                            <div class="first-level-top">
                                                <div class="quota-name" style="font-size: 18px;">{{subItem.quotaName}}</div>
                                            </div>
                                            <div class="first-level-mid"></div>
                                            <div class="first-level-bottom">
                                                <div class="star"></div>
                                                <div class="quota-score">{{subItem.quotaScore || '0'}}分</div>
                                            </div>
                                        </div>
                                        <div :class="subIndex === secondQuotaActiveIndex && secondExpandable ? 'commissure-icon' : 'expand-icon'"
                                             @click.prevent.stop="handleCommissure(subIndex,'second')" v-if="subItem.kpiTownQuotas && subItem.kpiTownQuotas.length>0"></div>
                                        <div class="quota-detail" v-if="subIndex === secondQuotaActiveIndex && secondExpandable && subItem.kpiTownQuotas && subItem.kpiTownQuotas.length>0 ">
                                            <div class="row-line row-line-active"></div>
                                            <div :style="childLine(subItem.kpiTownQuotas)" class="root-col-line-active"></div>
                                            <div class="first-level-out-container">
                                                <div v-for="sonItem in subItem.kpiTownQuotas" :class="`first-level-container ${subIndex === secondQuotaActiveIndex ? 'first-level-container-active' : ''}`">
                                                    <div :class="`row-line ${subIndex === secondQuotaActiveIndex ? 'row-line-active' : ''}`"></div>
                                                    <div class="first-level-contain">
                                                        <div class="first-level-top">
                                                            <div class="quota-name" style="font-size: 18px;">{{sonItem.quotaName}}</div>
                                                        </div>
                                                        <div class="first-level-mid"></div>
                                                        <div class="first-level-bottom">
                                                            <div class="star"></div>
                                                            <div class="quota-score">{{sonItem.score || '0'}}分</div>
                                                            <div class="weight" @click="showWeight(sonItem)" v-if="item.isSetWeight==='1'"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div> -->
            <vue2-org-tree v-if="indexList.length>0" :data="quotas" :horizontal="true" collapsable @on-expand="onExpand" />
            <div class="resultContent" v-else>
                暂无数据
            </div>
        </div>
        <!-- <el-dialog :title="weightTitle" :visible.sync="diaVis" append-to-body :before-close="handClose">
            <div v-for="item in currentWeight" class="diaStyle" >
                <div>{{item.districtName}}：<span style="color: #1f74ff;font-size: 18px">{{item.weight}}</span></div>
            </div>
            <div style="clear: both;text-align: right">
                <el-button type="primary" size="large" @click="handClose">关闭</el-button>
            </div>
        </el-dialog> -->
    </section>
</template>

<script>
    import CheckContentTown from '@/components/CheckContentTown'
    export default {
        name: 'townIndex',
        props: {
           'taskYear': {
               type: String
           }
        },
        data(){
            return{
                user:{},
                pageLoad:false,
                indexList:[],
                currentTown:'',
                diaVis:false,
                currentWeight:[],
                firstQuotaActiveIndex: 0,
                secondQuotaActiveIndex: 0,
                firstExpandable: true,
                secondExpandable:true,
                weightTitle:'',
                finalHeight:'',
                quotas: {
                    id: 0,
                    children: []
                },
                form:{},
                rules:{
                    personName: [
                        { required: true, message: '请输入确认人', trigger: 'blur' }
                    ],
                    advice: [
                        { required: true, message: '请输入指标建议', trigger: 'blur' }
                    ],
                },
            }
        },
        methods:{
            //提交镇级确认一二级指标的人和建议
            townAdvice(form){
                this.$refs[form].validate((valid) => {
                    if(valid){
                        this.$emit('fatherMethod',this.form.advice);
                    }
                });
            },
            reset(){
                this.form.advice = '';
            },
            showIndex(){
                this.pageLoad = true;
                this.$http('get',`identity/kPITownQuota/getAllByDistrictId?districtId=${this.currentTown}&quotaYear=${this.taskYear}`, false).then(data=>{
                    this.firstQuotaActiveIndex = 0 ;
                    this.secondQuotaActiveIndex = 0 ;
                    this.firstExpandable = true;
                    this.secondExpandable = true;
                    this.indexList = data;
                    this.pageLoad = false;
                    this.getRes(data)
                }).catch(()=>{
                    this.pageLoad = false;
                })
            },
            getCurrentTown(data){
                this.currentTown = data.districtId;
                this.showIndex();
            },
            handCurrentYear(){
                this.showIndex();
            },
            // showWeight(son){
            //     this.diaVis = true;
            //     this.currentWeight = [];
            //     this.weightTitle = "权重信息--"+son.quotaName;
            //     this.$http('get',`identity/kPIVillageQuota/getAllByTownQuotaId?townQuotaId=${son.id}`,false).then(data=>{
            //         this.currentWeight = data;
            //     })
            // },
            handClose(){
                this.diaVis = false;
                this.currentWeight = [];

            },
            // handleCurrentQuotaChange(item, index,type) {
            //     if(type=='first'){
            //         this.firstExpandable = true;
            //         this.firstQuotaActiveIndex = index;
            //         this.secondExpandable = true;
            //         this.secondQuotaActiveIndex = 0;
            //     }else if(type=='second'){
            //         this.secondExpandable = true;
            //         this.secondQuotaActiveIndex = index;
            //     }

            // },
            // handleCommissure(index,type) {
            //     if(type=='first'){
            //         if (index != this.firstQuotaActiveIndex) {
            //             this.firstQuotaActiveIndex = index;
            //             this.firstExpandable = true;
            //             this.secondQuotaActiveIndex = 0;
            //             this.secondExpandable = true;
            //         } else {
            //             this.firstExpandable = !this.firstExpandable;
            //             this.secondQuotaActiveIndex = 0;
            //             this.secondExpandable =  this.firstExpandable;
            //         }
            //     }else if(type=='second'){
            //         if (index != this.secondQuotaActiveIndex) {
            //             this.secondQuotaActiveIndex = index;
            //             this.secondExpandable = true;
            //         } else {
            //             this.secondExpandable = !this.secondExpandable;
            //         }
            //     }
            // },
            // childLine(arr) {
            //   if (arr != null) {
            //     let size =arr.length;
            //     return {height: `${175 * size - 165 - 40 * (size - 1) - 8}px`}
            //   } else {
            //     return {height: `0px`}
            //   }
            // },
            collapse(list) {
                var _this = this;
                list.forEach(function(child) {
                    if (child.expand) {
                        child.expand = false;
                    }
                    child.children && _this.collapse(child.children);
                });
            },
            onExpand(e,data) {
                if ("expand" in data) {
                    data.expand = !data.expand;
                    if (!data.expand && data.children) {
                        this.collapse(data.children);
                    }
                } else {
                    this.$set(data, "expand", true);
                }
            },
            toggleExpand(data, val) {
                var _this = this;
                if (Array.isArray(data)) {
                    data.forEach(function(item) {
                        _this.$set(item, "expand", val);
                        if (item.children) {
                            _this.toggleExpand(item.children, val);
                        }
                    });
                } else {
                    this.$set(data, "expand", val);
                    if (data.children) {
                        _this.toggleExpand(data.children, val);
                    }
                }
            },
            getRes(data){
                let arr = [];
                let obj = {}
                data.map(item => {
                    obj = item;
                    obj['children'] = item['kpiQuotas'];
                    obj['score'] = item['quotaScore'];
                    obj['children'].map(item => {
                        item['score'] = item['quotaScore'];
                        delete item['quotaScore'];
                    })
                    delete obj['kpiQuotas'];
                    delete obj['quotaScore'];
                    arr.push(obj)
                })
                this.quotas.children = arr;
                this.toggleExpand(this.quotas,true);

            }
        },
        components:{
            CheckContentTown
        },
        // computed: {
        //     firstLevelLine() {
        //         let size = this.indexList.length;
        //         return {height: `${175 * size - 165 - 40 * (size - 1) - 8}px`}
        //     },
        //     firstLevelActiveLine() {
        //         let size = this.indexList.length;
        //         let height = (175 * size - 165 - 40 * (size - 1) - 8)/2;
        //         let top = Number(`-${height/2}`);
        //         height = Math.abs(height - this.firstQuotaActiveIndex * 135);
        //         top += this.firstQuotaActiveIndex * 67.5;
        //         return {height: `${height}px`, top: `${top}px`, position: 'relative'}
        //     },
        //     secondLevelLine() {
        //         let size = this.indexList[this.firstQuotaActiveIndex].kpiQuotas.length;
        //         return {height: `${175 * size - 165 - 40 * (size - 1) - 8}px`}
        //     },
        //     secondLevelActiveLine() {
        //         let size = this.indexList[this.firstQuotaActiveIndex].kpiQuotas.length;
        //         let height = (175 * size - 165 - 40 * (size - 1) - 8)/2;
        //         let top = Number(`-${height/2}`);
        //         height = Math.abs(height - this.secondQuotaActiveIndex * 135);
        //         top += this.secondQuotaActiveIndex * 67.5;
        //         return {height: `${height}px`, top: `${top}px`, position: 'relative'}
        //     },
        //     containerHeight() {
        //         let minHeight = 1000;
        //         let quotaHeight = Number(this.firstLevelLine.height.replace(/px/, ''));
        //         let secondQuotaHeight = 0;
        //         if (this.firstExpandable && this.indexList[this.firstQuotaActiveIndex]) {
        //             secondQuotaHeight = Number(this.childLine(this.indexList[this.firstQuotaActiveIndex].kpiQuotas).height.replace(/px/, ''));
        //         };
        //         let thirdQuotaHeight = 0;
        //         if(this.secondExpandable && this.indexList[this.firstQuotaActiveIndex].kpiQuotas[this.secondQuotaActiveIndex]){
        //             console.log(this.indexList[this.firstQuotaActiveIndex].kpiQuotas,this.secondQuotaActiveIndex,"uu")
        //             thirdQuotaHeight = Number(this.childLine(this.indexList[this.firstQuotaActiveIndex].kpiQuotas[this.secondQuotaActiveIndex].kpiTownQuotas).height.replace(/px/,''));
        //         }
        //         let finalHeight =(thirdQuotaHeight + 100)/2;
        //         this.finalHeight = finalHeight>0?finalHeight:0;
        //         console.log(this.finalHeight,"top")
        //         return {top: `${this.finalHeight}px`};
        //     }

        // },
        mounted(){
                this.currentTown = this.user.districtId;
                this.showIndex();
        },
        created(){
            this.user = JSON.parse(sessionStorage.getItem("userInfo"));
        }
    };
</script>

<style scoped>
    .townIndex{
        min-height: 2000px;
    }
    .townIndex .resultContent{
        overflow-x:scroll;
        white-space:nowrap;
        line-height: 45px;
        font-size: 16px;
        text-align: center;
        font-weight: bold;
    }
    .townIndex .resultBorder{
        border-right:1px solid #eeeced;
        border-bottom:1px solid #eeeced
    }
    .townIndex .firstIndex{
        flex:3;
    }
    .townIndex .secondIndex{
        flex:4;
    }
    .townIndex .thirdIndex{
        flex:5;
    }
    .townIndex .scoreIndex{
        flex:1;
    }
    .diaStyle{
        float: left;
        font-weight: bold;
        font-size: 16px;
        line-height: 45px;
        width: 200px;
        margin: 0 15px;
    }
    .btnReleave{
        border: 1px solid rgba(85,189,148, 0.6);
        background:rgba(85,189,148,1);
        border-radius:4px;
        width: 120px;
        height: 50px;
        font-size: 18px;
    }
    .btnReleave:hover {
        background: rgba(85,189,148, 0.6) !important;
        border: 1px solid rgba(85,189,148, 0.6);
    }
    .btn_reset{
        background:#E6A23C;
        border-radius:4px;
        width: 120px;
        height: 50px;
        font-size: 18px
    }
    .btnReleave:hover {
        border: 1px solid rgba(85,189,148, 0.6);
        background: rgba(85,189,148, 0.6) !important;
    }
    .btn_reset:hover{
        background:#E6A23C;
        border-radius:4px;
    }
    .townIndex .quota-score {
        width: 50px;
        height: 23px;
        font-size: 18px;
        font-family: FZHei-B01S;
        font-weight: 400;
        color: #169360;
        margin-left: 8px;
        display: inline-block;
        vertical-align: top;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
<style rel="stylesheet/scss" lang="scss">
    .townIndex {
        .quota-root {
            width:103px;
            height:263px;
            background: url("/static/village/quota-root-bg.png");
            border-radius:4px;
            padding-top: 14px;
        }
        .root-name {
            width:23px;
            height:159px;
            font-size:24px;
            font-family:Source Han Sans CN;
            font-weight:400;
            color:rgba(42,42,42,1);
            line-height:27px;
            margin: 0 33px 0 33px;
        }
        .root-logo {
            width:93px;
            height:86px;
            border-radius:4px;
        }
        .expand-icon {
            width: 20px;
            height: 20px;
            background: url("/static/village/expand.png");
        }
        .commissure-icon {
            width: 20px;
            height: 20px;
            background: url("/static/village/commissure.png");
            background-size: cover;
        }
        .row-line {
            width: 80px;
            border-top: 2px solid #71C3B5;
        }
        .root-row-line {
            width: 80px;
            border-top: 2px solid #389671;
        }
        .root-col-line {
            border-left: 2px solid #71C3B5;
        }
        .root-col-line-active {
            border-left: 2px solid #389671;
            position: relative;
            left: -2px;
        }
        .first-level-out-container {
            position: relative;
            left: -2px;
        }
        .first-level-container {
            /*width: 330px;*/
            height: 95px;
            display: flex;
            justify-content: start;
            align-items: center;
            margin: 40px 0;
            cursor: pointer;
        }
        .first-level-container:hover,.first-level-container-active {
            .first-level-mid {
                background: #389671;
                height: 2px;
            }
            .first-level-top {
                color: #389671;
            }
            .first-level-contain {
                border: 2px solid  #389671;
            }
        }
        .first-level-contain {
            width:250px;
            height:95px;
            background:rgba(255,255,255,1);
            box-shadow:0px 3px 6px 0px rgba(50,140,104,0.24);
            border-radius:4px;
        }
        .first-level-top {
            font-size: 20px;
            font-family: "Microsoft YaHei UI Light";
            font-weight:400;
            color:rgba(104,104,104,1);
            margin: 12px 26px 10px 26px;
            text-align: left;
        }
        .first-level-mid {
            margin: 0 20px;
            background:rgba(189,188,188,1);
            height:1px;
            opacity:0.6;
        }
        .first-level-bottom {
            font-size:20px;
            font-weight:400;
            color:rgba(104,104,104,1);
            margin: 10px 18px 16px 18px;
            text-align: left;
        }
        .star {
            width: 22px;
            height: 22px;
            background: url("/static/village/star.png");
            display: inline-block;
            vertical-align: text-bottom;
        }
        .weight {
            width:16px;
            height:16px;
            background: url("/static/village/setWeight.png");
            margin-left: 4px;
            float: right;
            display: inline-block;
            vertical-align: text-bottom;
            position: relative;
            top: 2px
        }
        .quota-name {
            font-weight: 700;
            vertical-align: top;
            display: inline-block;
            max-width: 194px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .quota-score {
            width:50px;
            height:22px;
            font-size:20px;
            font-family:FZHei-B01S;
            font-weight:400;
            color:rgba(22,147,96,1);
            margin-left: 8px;
            display: inline-block;
            vertical-align: top;
        }
        .quota-container {
            display: flex;
            justify-content: start;
            align-items: center;
            transform: scale(0.78);
            left: -180px;
            position: relative;
        }
        .row-line-active {
            border-top: 2px solid #389671;
        }
        .quota-detail {
            display: flex;
            justify-content: left;
            align-items: center;
        }
    }
</style>
<style>
    .org-tree-container {
        margin: 50px 0 0 -300px;
    }
    .org-tree-node-label .org-tree-node-label-inner {
        background-color: #fff;
    }
    .org-tree-container {
        background-color: transparent!important;
    }
    .horizontal .org-tree-node-children:before {
        width: 100px!important;
    }
    .horizontal .org-tree-node-children {
        padding-left: 100px!important;
    }
    .horizontal .org-tree-node-btn {
        margin-left: 90px!important;
    }
    .horizontal .org-tree-node:before, .horizontal .org-tree-node:after {
        width: 100px!important;
    }
    .horizontal .org-tree-node {
        padding-left: 100px!important;
    }
    .org-tree-container .org-tree > div:first-child > div:first-child > div:first-child {
        width: 73px!important;
        height: 220px!important;
        background-size: 106px 300px!important;
    }
    .org-tree-node-label-inner div:first-child {
        height: 36px!important;
    }
    .horizontal.collapsable .org-tree-node.collapsed .org-tree-node-label:after {
        width: 90px!important;
    }
</style>
